<template>
  <div ref="markmap" style="height:600px"></div>
</template>

<script>
import { transform } from 'markmap-lib'
import { Markmap } from 'markmap-view'

export default {
  data() {
    return {
      markmapInstance: null
    }
  },
  props: {
    content: String
  },
  mounted() {
    this.createMarkmap()
  },
  beforeDestroy() {
    if (this.markmapInstance) {
      this.markmapInstance.destroy()
      this.markmapInstance = null
    }
  },
  watch: {
    content() {
      if (this.markmapInstance) {
        const { root } = transform(this.content || '')
        this.markmapInstance.setData(root)
      }
    }
  },  
  methods: {
    createMarkmap() {
      const { root } = transform(this.content || '')
      this.markmapInstance = Markmap.create(this.$refs.markmap, null, root)
    }
  }
}
</script>